<template>
  <el-form ref="editFormRef" :model="form" v-loading="loading">
    <pub-edit-description :ndColumns="1">
      <!-- <pub-edit-description-item :span="1" label="机构类型" required>
        <el-form-item prop="orgType" :rules="$formRules.select">
          <orgTypeList
            v-if="!editId"
            @change="changeOrgType"
            v-model="form.orgType"
          ></orgTypeList>
          <div v-else>{{ formatJglx(form.orgType) }}</div>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="机构名称" required>
        <el-form-item prop="orgId" :rules="$formRules.select">
          <div>  {{ form.orgName }}</div>
        </el-form-item>
      </pub-edit-description-item> -->
      <pub-edit-description-item :span="1" label="用户角色" required>
        <el-form-item prop="roleId" :rules="$formRules.select">
          <pub-select-api
            width="100%"
            v-model="form.roleId"
            url="/role/list"
            @change="changeRole"
            :searchParams="{
              pageSize: 9999,
              pageNum: 1,
              platform: '1'
            }"
            :optionsFormat="{
              label: 'name',
              value: 'id'
            }"
          ></pub-select-api>
        </el-form-item>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>
  <div class="dialog-footer-btn">
    <el-button type="default" @click="emit('close')">取消</el-button>
    <el-button
      v-hasPermissions="['basic:system:account:save']"
      type="primary"
      v-prevent-repeat-click
      @click="submitForm(editFormRef)"
    >
      保存
    </el-button>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { get_roles_bind_detail, get_org_type_list } from '@/api/system.js'

const editFormRef = ref()
const loading = ref(false)
const emit = defineEmits(['close', 'submitForm'])
const form = ref({})
const props = defineProps({
  roleId: {
    type: String
  }
})

// watch(
//   () => form.orgId,
//   () => {
//     searchFormOrg.value.orgType = ''
//   }
// )
const changeRole = val => {
  form.value.roleId = val.id
}
const allOrgType = ref([])
const getAllOrgType = async () => {
  let { data } = await get_org_type_list()
  allOrgType.value = data
  console.log(allOrgType.value)
}
const keyValue = ref('')

const changeOrg = val => {
  // searchFormOrg.value.orgType = val.orgType
  if (val) {
    form.value.orgType = val.orgType
  }
  form.value.roleId = ''
  keyValue.value = new Date().getTime()
}

const changeOrgType = () => {
  form.value.roleId = ''
  form.value.orgId = ''
}
const formatJglx = orgType => {
  let item = allOrgType.value.find(item => item.code == orgType)
  return item ? item.name : ''
}
const searchFormOrg = ref({})

const updateLoading = val => {
  loading.value = val
}

const submitForm = () => {
  editFormRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      emit('submitForm', form.value)
    }
  })
}

onBeforeMount(() => {
  if (props.roleId) {
    form.value.roleId = props.roleId
  }
})
</script>
<style scoped>
/* 弹窗提交时loading样式需占满整个弹窗 */
.el-loading-parent--relative {
  position: inherit !important;
}
</style>
